/**
 * @description 设置页 - Yuanr
 */
import React from 'react';
import {
  View, Alert, Button, StyleSheet
} from 'react-native';
import { StackActions } from 'react-navigation';
import ItemPanel from '../components/ItemPanel';
import BaseView from './BaseView';

export default class Setting extends BaseView {
  constructor() {
    super();
    this.clickRight = this.clickRight.bind(this);
    this.loginOut = this.loginOut.bind(this);
  }

  // 生命周期render前
  async componentWillMount() {
    const { navigation } = this.props;
    navigation.setParams({ goback: this.goback.bind(this) });
  }

  componentDidMount() {
    super.componentDidMount();
    this.props.navigation.setParams({
      title: '设置',
    });
  }

  goback() {
    const { navigation } = this.props;
    const backAction = NavigationActions.back();
    navigation.dispatch(backAction);
  }

  clickRight() {
    Alert.alert(
      'Alert Title',
      'My Alert Msg',
      [
        { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
        { text: 'OK', onPress: () => console.log('OK Pressed') },
      ],
      { cancelable: false }
    );
  }

  loginOut() {
    Alert.alert(
      'Alert',
      '确定退出吗？',
      [
        // { text: 'Ask me later', onPress: () => console.log('Ask me later pressed') },
        { text: '返回', onPress: () => { }, style: 'cancel' },
        { text: '确定', onPress: () => this.loginNav() },
      ],
      { cancelable: false }
    );
  }

  loginNav() {
    const { navigation } = this.props;
    const navigateAction = StackActions.replace({
      key: navigation.state.key,
      routeName: 'Login'
    });
    navigation.dispatch(navigateAction);
  }

  render() {
    return (
      <View>
        <ItemPanel title="登陆密码" arrowText="修改密码" arrowClick={this.clickRight} arrowColor="blue" />
        <ItemPanel title="清楚缓存" arrowText="5.67M" arrowClick={this.clickRight} />
        <View style={styles.fixedButton}>
          <Button style={styles.loginOut} onPress={this.loginOut} title="切换账号/退出" />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  relative: {
    position: 'relative',
    top: 0,
    left: 0,
    height: 800
  },
  fixedButton: {
    position: 'absolute',
    left: 0,
    top: 520,
    padding: 10,
    width: '100%'
  },
  loginOut: {
    height: 100,
    backgroundColor: 'red'
  }
});
